<template>
  <view>
    <!-- 选择 -->
    <template v-if="JSON.stringify(address) === '{}'">
      <view class="address-sel-box">
        <button
          class="address-sel-btn"
          type="primary"
          size="mini"
          @click="getUserAddress"
        >
          添加收货地址 +
        </button>
      </view>
    </template>

    <template v-else>
      <!-- 收获信息 -->
      <view class="address-info-box" @click="getUserAddress">
        <view class="info-row1">
          <view class="row1-left">收货人：{{ address.userName }}</view>
          <view class="row1-right">
            <view>电话：{{ address.telNumber }}</view>
            <uni-icons
              class="row1-right-icon"
              type="forward"
              size="16"
            ></uni-icons>
          </view>
        </view>
        <view class="info-row2">
          <view class="info-row2-left">收货地址：</view>
          <view class="info-row2-right">
            {{
              `${address.provinceName}${address.cityName}${address.countyName}${
                address.detailInfo
              }`
            }}
          </view>
        </view>
      </view>
    </template>
    <!-- 底部线 -->
    <image src="@/static/adderss.png" class="address-bottom-pic"></image>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'my-address',
  data() {
    return {}
  },
  methods: {
    //获取用户收货地址
    async getUserAddress() {
      const [err, data] = await uni.chooseAddress().catch(err => err)
      //  用户成功的选择了收货地址
      if (err === null && data.errMsg === 'chooseAddress:ok') {
        // 为 data 里面的收货地址对象赋值
        this.addAddress(data)
      } else {
        uni.showToast({
          title: '请选择一个收货地址',
          icon: 'none'
        })
        this.addAddress({})
      }
    },
    //
    ...mapMutations('user', {
      addAddress: 'addAddress'
    })
  },
  computed: {
    ...mapState('user', {
      address: 'address'
    })
  }
}
</script>

<style lang="scss">
.address-sel-box {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  .address-sel-btn {
    line-height: 40px;
    font-size: 14px;
    // width: 80px;
  }
}
.address-info-box {
  font-size: 14px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 5px;
  .info-row1 {
    display: flex;
    justify-content: space-between;
    .row1-right {
      display: flex;
    }
  }
  .info-row2 {
    display: flex;
    margin-top: 10px;
    // justify-content: space-between;
    .info-row2-left {
      white-space: nowrap;
    }
    .info-row2-right {
    }
  }
}
.address-bottom-pic {
  height: 5px;
  width: 100%;
}
</style>
